---
import { getCollection } from "astro:content";
import AppletLayout from "../layouts/applet.astro";

// Generate static paths
export async function getStaticPaths() {
  async function gen(path: string[]): Promise<{
    applet: string;
    title: string;
    Component: (_props: Record<string, any>) => any;
  }> {
    let Applet;
    let manifest;

    if (path.length === 2) {
      Applet = await import(`../applets/${path[0]}/${path[1]}/applet.astro`);
      manifest = await import(`../applets/${path[0]}/${path[1]}/manifest.json`);
    }

    if (path.length === 4) {
      Applet = await import(`../applets/${path[0]}/${path[1]}/${path[2]}/${path[3]}/applet.astro`);
      manifest = await import(
        `../applets/${path[0]}/${path[1]}/${path[2]}/${path[3]}/manifest.json`
      );
    }

    if (Applet === undefined || manifest === undefined) {
      throw new Error("Unsupported path length");
    }

    return {
      applet: path.join("/"),
      title: manifest.default.name,
      Component: Applet.default,
    };
  }

  const applets = await getCollection("applets");
  const pages = await Promise.all(
    applets.map((applet) => {
      return gen(applet.id.split("/").slice(0, -1));
    }),
  );

  return pages.map(({ applet, Component, title }) => {
    return {
      params: { applet },
      props: { Component, title },
    };
  });
}

// Render props
const { Component, title } = Astro.props;
---

<AppletLayout title={title}>
  <Component />
</AppletLayout>